<template>
	<div class="regsiter">
		<el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
			<el-form-item label="用户账号" prop="userName">
				<el-input v-model="user.userName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="用户密码" prop="password">
				<el-input type="password" v-model="user.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="repassword">
				<el-input type="password" v-model="user.repassword" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">用户注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			let validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.user.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				user: {
					userName: '',
					password: '',
					repassword: ''

				},
				rules: {
					userName: [{
							required: true,
							message: '必填项',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 20,
							message: '用户账号字符串在8到20之间',
							trigger: ['blur', 'change']
						}

					],
					password: [{
							required: true,
							message: '必填项',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 32,
							message: '用户账号字符串在8到32之间',
							trigger: ['blur', 'change']
						}
					],
					repassword: [
						//和password进行比较
						//validator函数进行处理
						{
							validator: validatePass2,//同步方法
							trigger: ['blur', 'change']
						},

					]
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
						//实现注册的业务
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}


	}
</script>

<style>
</style>
